افزودن یک راهنمای ساده به صفحات همیشه به کاربران سایت کمک می کند تا مسیر درست را بپیمایند و با کمترین کلیک به اهداف خود نزدیک شوند یکی از این نوع راهنمای ها تول تیپ (ToolTip) می باشد که بسیار ساده و رو به مخاطب خود کمک می نماید شمار این نوع سبک از طراحی سایت ها برای راهنمای رو به افزایش می باشد ما در این پست برخی از تول تیپ های رایج در سال 2017 را مرور می کنیم . تولتیپ (ToolTip) اول که بسیار زیبا در بر روی نقاط مختلف یک تصویر با شکل دایره نشان داده شده است به کاربران نشان می دهد برای راهنمای بیشتر موس خود را  بر روی آن دایره قرار دهند هنگامی که چنین اتفاقی بیافتد یک باکسی نمایان می شود و در مورد آن قسمت از تصویر توضیحاتی ارائه می نماید بسته به نوع طراحی باکس و افکت های نشان داده شده در باکس می تواند تغییر کرده و مخاطب را بیشتر جذب نماید .

تولتیپ (ToolTip) بعدی که مورد توجه طراحان قرار گرفته است برای متن ها کوتاه مورد استفاده قرار می گیرد وقتی بر روی یک متن موس قرار می گیرد با افکت های مختلف از جمله fading, expanding و... روبرو می شوند این نوع طراحی می تواند تنها با HTML5 امکان پذیر باشد این بدان معنی است که کد اضافی دیگر نظیر جاوا اسکریپت نیاز نیست تا لود بیشتری را از یک صفحه سایت بگیرد .

 اغلب طراحان سایت هنگام طراحی فرم های طولانی در کنار هر فیلدی یک آیکون علامت سوال قرار می دهند تا کاربر وقتی با موس بر روی آن می رود اطلاعاتی برای راهنمای آن فیلد را نشان دهد همین امر باعث شده است حتی این قسمت نیز مورد توجه طراحان قرار گرفته و با افکت ها و انیمیشن های زیبا مخاطب خود را که عموما تمایل چندانی به پر کردن فرم ندارند را راضی نگه دارند این سبک زیبا تنها با HTML5 می تواند مورد استفاده قرار گیرد سبکی عالی برای راهنمای در فرم .

نوع دیگری از تولتیپ (ToolTip) ها در طراحی سایت برای دکمه ها مورد استفاده قرار می گیرد وقتی کاربران به واقع می خواهند بدانند این دکمه چه عملیاتی را برای آن ها در سایت انجام می دهد این سبک مورد استفاده قرار می گیرد . یک طراح خلاق به نام Aditya Bhandari این کار را با ویژگی های CSS3 انجام داده است مثلا فرض کنید طراح در حال طراحی صفحه دانلود فایل برای مشتریان خود می باشد حال از طریق این سبک می تواند به کاربران خود بگوید هر فایل چه مقدار حجم دارد .